import {
  Button,
  Form,
  FormItem,
  Image,
  InputNumber,
  message,
  Space,
  Spin,
  TypographyText
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'

import { materialApi } from '@/apis'
import { NewGoods } from '@/apis/materialTypes'
import { isValueEmpty } from '@/utils'

import SelectJfGoods from './components/selectJfGoods'

export default defineComponent({
  name: 'NewGoodsRule',
  setup() {
    const selectGoodsRef = ref({} as any)
    const loading = ref(false)
    const saveLoading = ref(false)
    const data = ref({ newProductDeadline: 0, goodsList: [] } as NewGoods)

    onMounted(() => {
      getDetail()
    })
    //获取详情
    async function getDetail() {
      try {
        loading.value = true
        const resp = await materialApi.getNewGoods()
        if (resp?.goodsList) {
          data.value = resp
        }
      } finally {
        loading.value = false
      }
    }

    function addGoods() {
      selectGoodsRef.value.show()
    }

    //保存
    async function save() {
      let goodsIds = [] as number[]
      if (!isValueEmpty(data.value.goodsList)) {
        goodsIds = data.value.goodsList.map(item => item.id)
      }

      try {
        saveLoading.value = true
        await materialApi.editNewGoods(data.value.newProductDeadline, goodsIds)
        message.success('保存成功')
      } finally {
        saveLoading.value = false
      }
    }

    //商品选中
    function onGoodsSelect(item) {
      data.value.goodsList.push(item)
    }

    return {
      data,
      addGoods,
      selectGoodsRef,
      onGoodsSelect,
      loading,
      saveLoading,
      save
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form>
          <FormItem label={'积分商品首次上架'}>
            <Space>
              <InputNumber
                v-model:value={this.data.newProductDeadline}
                min={0}
                max={1000}
                precision={0}
                style={{ width: '80px' }}
              />
              天内，系统认定为新品，超过设置时间则判定为普通商品；
            </Space>
          </FormItem>
          <FormItem label={'积分上新推荐'}>
            <Space size="middle">
              {this.data.goodsList.map((item, index) => {
                return (
                  <Space>
                    <Space>
                      <Image
                        src={item.mainImg}
                        style={{ width: '100px', height: '100px' }}
                      ></Image>
                      <Space direction="vertical">
                        <TypographyText>{item.goodsName}</TypographyText>
                        <TypographyText>{`${item.exchangePrice}元+${item.point}积分`}</TypographyText>
                        <Button
                          onClick={() => {
                            this.data.goodsList.splice(index, 1)
                          }}
                          size="small"
                          danger
                        >
                          删除
                        </Button>
                      </Space>
                    </Space>
                  </Space>
                )
              })}
              <Button
                v-show={this.data.goodsList?.length < 2}
                onClick={this.addGoods}
              >
                添加商品
              </Button>
            </Space>
          </FormItem>
          <Button
            onClick={this.save}
            loading={this.saveLoading}
            type="primary"
            size="large"
          >
            保存
          </Button>
        </Form>

        <SelectJfGoods
          ref="selectGoodsRef"
          onSelect={this.onGoodsSelect}
          filterIds={this.data.goodsList.map(item => item.id)}
        />
      </Spin>
    )
  }
})
